{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/static/js/artDialog/jquery.artDialog.js?skin=default"></script>
<script type="text/javascript" src="/static/js/artDialog/plugins/iframeTools.js"></script>
{{ttt}}
{% ifequal is_con 0 %}
<table width="100%">
		<tr style="background:#dfdfdf;">
			<td align="center"><h1  style="line-height:40px;font-size:18px;color:#10D3F8">Mail List</h1></td>
		</tr>
</table>
<div class="form-div">
  <form action="" method="get" name="searchForm">
    <img src="/static/images/icon_search.gif" width="26" height="22" border="0" alt="SEARCH" />
	UserName:
		<input type='text' name='username' value='{% if username %}{{username}}{%endif%}'/>
	Email:
		<input type='text' name='email' value='{% if email %}{{email}}{%endif%}'/>
	Group:
		<select name='groupid' onchange='$("#search").click()'>
			<option value='0'>All</option>
			{%for g in group%}
			<option value='{{g.0}}'>Group {{g.0}}</option>
			{%endfor%}
		</select>
	<input type="button" value="Search" id='search' class="g-button g-button-submit"/>
	&nbsp;<a href='/addsysemail' class="open_addemail">Add New Email</a>
  </form>
</div>
<script>
$(function(){
	$("#search").bind({
		click:function(){
			var t = this
			if(t.style.cursor == 'wait'){
				return false;
			}
			t.style.cursor = 'wait'
			var data = $('form[name="searchForm"]').serializeArray()
			var datas = {'is_con':1}
			for(var i=0;i<data.length;i++){
				datas[data[i].name] = data[i].value
			}
			$.ajax({
				url:'',
				data:datas,
				type:'get',
				dataType:'html',
				success:function(e){
					t.style.cursor = 'pointer'
					$('#return').html(e)
				}
			})
		}
	})
	$('.open_addemail').click(function(){
		var url = $(this).attr('href')
		art.dialog.data('target_obj',$('div#return').children('table'))
		var dialog = art.dialog({title:'Add New Email',lock:true,padding:'5px'})
		$.get(url,function(e){
			dialog.content(e)
		})
		return false;
	})
});
</script>
	<style>
		.emaillist{
			float:left;
			padding:3px;
			margin:2px;
			border:1px solid #def;
		}
		.emaillist:hover{
			background:#efefef;
			cursor:pointer;
		}
	</style>
{% endifequal %}
<div id="return">
	<table width="100%" align="center" cellpadding="1" class="aui-ibox-data aui-dotted-split">
	  <thead>
		<tr>
			<th width="20"></th>
			<th align="left" width="100">Send User</th>
			<th align="left" width="120">Email</th>
			<th align="left" width="150">Email Password</th>
			<th align="left" width="120">Smtp Server</th>
			<th align="center" width="80">Group</th>
			<th align="center" width="50">Status</th>
			<th align="center" width="100">Send Total</th>
			<th align="center" width="120">Today Send Total</th>
			<th align="center" width="90">Time Limit</th>
			<th align="left" >Operate</th>
		</tr>
	  </thead>
	  <tbody>
	  {% if mails %}
		{%for m in mails %}
		<tr>
			<td>{{m.0}}</td>
			<td align="left">{{m.3}}</td>
			<td align="left">{{m.1}}</td>
			<td align="left">{{m.2}}</td>
			<td align="left">{{m.4}}</td>
			<td>Group {{m.9}}</td>
			<td align="left">
				{%ifequal m.11 1%}
					<span style="color:green;font-size:14px;">√</span>
				{%else%}
					<span style="color:red;font-size:14px;">×</span>
				{%endifequal%}
			</td>
			<td align="left">{{m.5}}</td>
			<td align="left">{{m.6}}</td>
			<td align="left">{{m.7}}</td>
			<td align="left">
				<a href="/addsysemail/?mid={{m.0}}" class="open_editemail" lineid="{{m.0}}"><img src="/static/images/icon_edit.gif" border="0" alt="edit" title='edit'></a>&nbsp;
				<a href="/static/images/icon_drop.gif" class="del_maillist" mid='{{m.0}}'><img src="/static/images/icon_drop.gif" border="0" alt="delete" title='delete'></a>
			</td>
		</tr>
		{% endfor %}
	  {%else%}
	    <tr>
			<td align="center" valign="center" height="60" colspan="14" style="color:green;font-size:16px;line-height: 60px;">No Results !</td>
		</tr>
	  {%endif%}
		<tr>
			<td align="center" colspan="14">
				<div id="pages" class="pager"></div>
			</td>
		</tr>
	  </tbody>
	</table>
</div>
<script>
(function(){
	$('.del_maillist').click(function(){
		if(confirm('Are You True Del?')){
			var mid = $(this).attr('mid')
			var t = this
			if(!mid){
				artDialog.alert('Please try again after to refresh the page')
				return false;
			}
			
			var dialog = art.dialog({lock:true,title:'Deleteing...'})
			$.get('/delsysemail',{'mid':mid,'t':Math.random()},function(e){
				var e = JSON.parse(e)
				if(e['code']==1){
					dialog.title('Successful!')
					dialog.content('Successful operation')
					dialog.button({name:'OK',callback:(function(){
						$(t).parents('tr').remove()
					})})
				}else{
					dialog.content(e['info'])
					dialog.title('Error!')
					dialog.button({name:'OK'})
				}
			})
		}
		return false;
	})

	$('.open_editemail').click(function(){
		var url = $(this).attr('href')
		art.dialog.data('target_obj',this)
		var dialog = art.dialog({title:'Add New Email',lock:true,padding:'5px',id:'editemail'})
		$.get(url,function(e){
			dialog.content(e)
		})
		return false;
	})
	function initdata(){
		var tolpage = {{tolpage}}
		var page = {{page}}
		var total = {{total}}
		if(tolpage<=1)return false;
		$('#pages').append(tolpage+'&nbsp;pages:')
		$('#pages').show()
		var i = 1;
		if(tolpage>10){
			i=(page-5)>1?page-5:1
			tolpage = tolpage>(page + 5)?page+5:tolpage
		}
		for(i;i<=tolpage;i++){
			var c = ''
			if(i=={{page}}){
				c = 'active'
			}
			$('#pages').append("<li><a href='?is_con=1&username={% if username %}{{username}}{%endif%}&email={% if email %}{{email}}{%endif%}&page="+i+"' onclick=\"$.get(this.href,function(e){$(\'#return\').html(e)});return false;\" class='"+c+"'>"+i+"</a></li>")
		}
		$('#pages').append('&nbsp;&nbsp;Total:&nbsp;'+total)
	}
	initdata()
})()
</script>
{% endblock %}
